<!DOCTYPE html>
<html class="no-js" lang="zh">
  <head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="alternate" href="https://www.desgard.com" hreflang="pt-BR">
<link href="http://gmpg.org/xfn/11" rel="profile">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="theme-color" content="#005344">
<title>Guardia · 瓜地</title>
<meta name="google-site-verification" content="zS1dSn20XtA4FJYEOQLXqI0boxZdMnJ2g3beje-cl20">
<meta name="description" content="模仿Facebook Paper中的Like Button.">
<meta name="keywords" content="">
<!-- Social: Facebook / Open Graph -->
<meta property="og:url" content="https://www.desgard.com/If-you-like-me-Thumb-Up/">
<meta property="og:title" content="       If you like me, Thumb Up! | Gua  ">
<meta property="og:description" content="模仿Facebook Paper中的Like Button.">
<meta property="og:site_name" content="Desgard_Duan">
<meta property="og:locale" content="pt_BR">
<meta property="og:type" content="website">
<meta property="og:author" content="https://www.facebook.com/desgard.duan">
<meta property="og:image" content="https://www.desgard.com">
<!-- Social: Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nandomoreirame">
<meta name="twitter:domain" content="https://www.desgard.com">
<meta name="twitter:title" content="       If you like me, Thumb Up! | Gua  ">
<meta name="twitter:description" content="模仿Facebook Paper中的Like Button.">
<meta name="twitter:image:src" content="https://www.desgard.com">
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="114x114" href="https://www.desgard.com/assets/ico/apple-touch-icon-114-516f4e19976b9e4dbb77ad9b576831fe.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://www.desgard.com/assets/ico/apple-touch-icon-72-5409b2df229305703caf583d86c845ab.png">
<link rel="apple-touch-icon" href="https://www.desgard.com/assets/ico/apple-touch-icon-57-aa873e019cf659e0d4e6a0b5bb9f379d.png">
<link rel="shortcut icon" href="https://www.desgard.com/assets/ico/favicon-4298be3d3fbe23e18d65bded9d930899.png">
<!-- rel prev and next -->
<!-- Canonical link tag -->
<link rel="canonical" href="https://www.desgard.com/If-you-like-me-Thumb-Up/">
<link rel="alternate" type="application/rss+xml" title="Gua" href="https://www.desgard.com/feed.xml">
<link rel="stylesheet" href="/assets/main-0b7b828712f4c43b75bba4861c907bb1.css">
<script src="/assets/modernizr-custom-cb807611a3e262b2eac59444cbab74d6.js" data-cfasync="false"></script>
<script src="/assets/js/jquery-3.1.js"></script>
<script src="/assets/js/jquery.rotate.js"></script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Website",
  "publisher": "www.desgard.com",
  "url": "http://www.desgard.com/",
  "description": "瓜地"
}
</script>
<script type="text/javascript">
  var disqus_shortname = 'desgard',
      baseurl          = '';
</script>
<!--
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-52446115-1']);
_gaq.push(['_trackPageview']);
(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>-->
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?c5a8123bc51782a3083a631ed9ff50e4";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
        inlineMath: [ ['$','$'] ],
        displayMath: [ ['$$','$$'] ],
        processEscapes: true
      }
    });
  </script>
  </head>
  <body class="post-template single">
    <header class="header">
  <div class="container">
    <h1><a href="/"><strong>desgard</strong>.com</a></h1>
    <nav class="navbar">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="#!" data-modal="modalSearch"><i class="fa fa-search"></i></a></li>
        <li><a href="/comment " target="_blank"><i class="fa fa-comments"></i></a></li>
        <li><a href="/feed.xml" target="_blank"><i class="fa fa-feed"></i></a></li>
      </ul>
    </nav>
  </div>
</header>
    <main class="wrapper container" itemprop="mainContentOfPage" itemscope="itemscope" itemtype="http://schema.org/Blog">
      <article class="post" itemscope="itemscope" itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
  <header class="post-header">
    <h1>If you like me, Thumb Up!</h1>
    <div class="post-meta">
      <time datetime="2015-10-13">
        <i class="fa fa-calendar-o"></i> <time datetime="2016-06-09"> 2016-06-09
      </time>
      <span>
        <i class="fa fa-comments"></i> <a href="#container">Comment me!</a>
      </span>
      <span>
<!--
-->
      </span>
    </div>
  </header>
  <p>端午节本来想出去玩耍，但是可恶的天气。好吧，在屋子里接着写代码。之后一个月就要安心复习了。</p>
<p>这次做的东西受到了Facebook Paper的like按钮影响，也自己做了一个来玩。其实网上早就有现成的轮子，但是个人觉得他们的封装太繁琐，所以自己按照自己的实现思路来实现了一下。</p>
<p><img src="http://7xwh85.com1.z0.glb.clouddn.com/2016-06-09-img0.gif" alt="" /></p>
<h2 id="section">拆解动画</h2>
<p>这次写的动画要简单的多。看到上面的成果图之后，很显然的就能看出分成两部分。</p>
<ul>
  <li>按钮缩放动画</li>
  <li>粒子爆炸动画</li>
</ul>
<p>下面我们逐一攻克。</p>
<h2 id="section-1">缩放动画</h2>
<p>除去粒子爆炸效果，就是一个大拇指的缩放动画。为了让体验最佳，当我们手指按下按钮的时候，最好有一个动画的过渡来告知按钮已被按下。而在所以动画动作，最好的体现手法就是按钮的放缩，这也符合物理中力学的按压动作，使物体产生形变。</p>
<p>至于实现起来就很容易了，我们用<code>transform</code>属性，对目标View添加放缩动画，再按帧加载，来控制View的变换情况。帧动画在之前的<a href="http://desgard.com/2016/05/30/DGSlimeView-Boom/">Particle Explosion Effect</a>有所提及，即使不看讲解直接看代码的参数名称也是一目了然的，这里直接给出代码，不再讲解：</p>
<div class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="c1">#pragma mark - Methods</span>
<span class="o">-</span> <span class="p">(</span><span class="n">void</span><span class="p">)</span> <span class="n">clickButtonPress</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="n">isSelected</span><span class="p">)</span> <span class="o">[</span><span class="nb">self</span> <span class="ss">popInsideWithDuration</span><span class="p">:</span> <span class="mi">0</span><span class="o">.</span><span class="mi">5</span><span class="o">]</span><span class="p">;</span>
    <span class="k">else</span> <span class="p">{</span>
        <span class="o">[</span><span class="nb">self</span> <span class="ss">popOutsideWithDuration</span><span class="p">:</span> <span class="mi">0</span><span class="o">.</span><span class="mi">5</span><span class="o">]</span><span class="p">;</span>
        <span class="sr">//</span> <span class="o">[</span><span class="nb">self</span><span class="o">.</span><span class="n">explodeAnimationView</span> <span class="n">animate</span><span class="o">]</span><span class="p">;</span>
    <span class="p">};</span>
<span class="p">}</span>
<span class="o">-</span> <span class="p">(</span><span class="n">void</span><span class="p">)</span> <span class="ss">popOutsideWithDuration</span><span class="p">:</span> <span class="p">(</span><span class="no">NSTimeInterval</span><span class="p">)</span> <span class="n">duringTime</span> <span class="p">{</span>
    <span class="n">__weak</span> <span class="n">typeof</span><span class="p">(</span><span class="nb">self</span><span class="p">)</span> <span class="n">weakSelf</span> <span class="o">=</span> <span class="nb">self</span><span class="p">;</span>
    <span class="nb">self</span><span class="o">.</span><span class="n">transform</span> <span class="o">=</span> <span class="no">CGAffineTransformIdentity</span><span class="p">;</span>
    <span class="o">[</span><span class="no">UIView</span> <span class="ss">animateKeyframesWithDuration</span><span class="p">:</span> <span class="n">duringTime</span> <span class="ss">delay</span><span class="p">:</span> <span class="mi">0</span> <span class="ss">options</span><span class="p">:</span> <span class="mi">0</span> <span class="ss">animations</span><span class="p">:</span> <span class="o">^</span><span class="p">{</span>
        <span class="o">[</span><span class="n">weakSelf</span> <span class="ss">setImage</span><span class="p">:</span> <span class="o">[</span><span class="no">UIImage</span> <span class="ss">imageNamed</span><span class="p">:</span> <span class="err">@</span><span class="s2">&quot;Like-Blue&quot;</span><span class="o">]</span> <span class="ss">forState</span><span class="p">:</span> <span class="no">UIControlStateNormal</span><span class="o">]</span><span class="p">;</span>
        <span class="o">[</span><span class="no">UIView</span> <span class="ss">addKeyframeWithRelativeStartTime</span><span class="p">:</span> <span class="mi">0</span>
                                <span class="ss">relativeDuration</span><span class="p">:</span> <span class="mi">1</span> <span class="o">/</span> <span class="mi">3</span><span class="o">.</span><span class="mi">0</span>
                                      <span class="ss">animations</span><span class="p">:</span> <span class="o">^</span><span class="p">{</span>
                                          <span class="n">typeof</span><span class="p">(</span><span class="nb">self</span><span class="p">)</span> <span class="n">strongSelf</span> <span class="o">=</span> <span class="n">weakSelf</span><span class="p">;</span>
                                          <span class="n">strongSelf</span><span class="o">.</span><span class="n">transform</span> <span class="o">=</span> <span class="no">CGAffineTransformMakeScale</span><span class="p">(</span><span class="mi">1</span><span class="o">.</span><span class="mi">5</span><span class="p">,</span> <span class="mi">1</span><span class="o">.</span><span class="mi">5</span><span class="p">);</span>
                                      <span class="p">}</span><span class="o">]</span><span class="p">;</span>
        <span class="o">[</span><span class="no">UIView</span> <span class="ss">addKeyframeWithRelativeStartTime</span><span class="p">:</span> <span class="mi">1</span> <span class="o">/</span> <span class="mi">3</span><span class="o">.</span><span class="mi">0</span>
                                <span class="ss">relativeDuration</span><span class="p">:</span> <span class="mi">1</span> <span class="o">/</span> <span class="mi">3</span><span class="o">.</span><span class="mi">0</span>
                                      <span class="ss">animations</span><span class="p">:</span> <span class="o">^</span><span class="p">{</span>
                                          <span class="n">typeof</span><span class="p">(</span><span class="nb">self</span><span class="p">)</span> <span class="n">strongSelf</span> <span class="o">=</span> <span class="n">weakSelf</span><span class="p">;</span>
                                          <span class="n">strongSelf</span><span class="o">.</span><span class="n">transform</span> <span class="o">=</span> <span class="no">CGAffineTransformMakeScale</span><span class="p">(</span><span class="mi">0</span><span class="o">.</span><span class="mi">8</span><span class="p">,</span> <span class="mi">0</span><span class="o">.</span><span class="mi">8</span><span class="p">);</span>
                                      <span class="p">}</span><span class="o">]</span><span class="p">;</span>
        <span class="o">[</span><span class="no">UIView</span> <span class="ss">addKeyframeWithRelativeStartTime</span><span class="p">:</span> <span class="mi">2</span> <span class="o">/</span> <span class="mi">3</span><span class="o">.</span><span class="mi">0</span>
                                <span class="ss">relativeDuration</span><span class="p">:</span> <span class="mi">1</span> <span class="o">/</span> <span class="mi">3</span><span class="o">.</span><span class="mi">0</span>
                                      <span class="ss">animations</span><span class="p">:</span> <span class="o">^</span><span class="p">{</span>
                                          <span class="n">typeof</span><span class="p">(</span><span class="nb">self</span><span class="p">)</span> <span class="n">strongSelf</span> <span class="o">=</span> <span class="n">weakSelf</span><span class="p">;</span>
                                          <span class="n">strongSelf</span><span class="o">.</span><span class="n">transform</span> <span class="o">=</span> <span class="no">CGAffineTransformMakeScale</span><span class="p">(</span><span class="mi">1</span><span class="o">.</span><span class="mi">0</span><span class="p">,</span> <span class="mi">1</span><span class="o">.</span><span class="mi">0</span><span class="p">);</span>
                                      <span class="p">}</span><span class="o">]</span><span class="p">;</span>
    <span class="p">}</span> <span class="ss">completion</span><span class="p">:</span> <span class="o">^</span><span class="p">(</span><span class="no">BOOL</span> <span class="n">finished</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">isSelected</span> <span class="o">=</span> <span class="no">YES</span><span class="p">;</span>
    <span class="p">}</span><span class="o">]</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">-</span> <span class="p">(</span><span class="n">void</span><span class="p">)</span> <span class="ss">popInsideWithDuration</span><span class="p">:</span> <span class="p">(</span><span class="no">NSTimeInterval</span><span class="p">)</span> <span class="n">duringTime</span> <span class="p">{</span>
    <span class="n">__weak</span> <span class="n">typeof</span><span class="p">(</span><span class="nb">self</span><span class="p">)</span> <span class="n">weakSelf</span> <span class="o">=</span> <span class="nb">self</span><span class="p">;</span>
    <span class="nb">self</span><span class="o">.</span><span class="n">transform</span> <span class="o">=</span> <span class="no">CGAffineTransformIdentity</span><span class="p">;</span>
    <span class="o">[</span><span class="no">UIView</span> <span class="ss">animateKeyframesWithDuration</span><span class="p">:</span> <span class="n">duringTime</span> <span class="ss">delay</span><span class="p">:</span> <span class="mi">0</span> <span class="ss">options</span><span class="p">:</span> <span class="mi">0</span> <span class="ss">animations</span><span class="p">:</span> <span class="o">^</span><span class="p">{</span>
        <span class="o">[</span><span class="n">weakSelf</span> <span class="ss">setImage</span><span class="p">:</span> <span class="o">[</span><span class="no">UIImage</span> <span class="ss">imageNamed</span><span class="p">:</span> <span class="err">@</span><span class="s2">&quot;Like-PlaceHold&quot;</span><span class="o">]</span> <span class="ss">forState</span><span class="p">:</span> <span class="no">UIControlStateNormal</span><span class="o">]</span><span class="p">;</span>
        <span class="o">[</span><span class="no">UIView</span> <span class="ss">addKeyframeWithRelativeStartTime</span><span class="p">:</span> <span class="mi">0</span>
                                <span class="ss">relativeDuration</span><span class="p">:</span> <span class="mi">1</span> <span class="o">/</span> <span class="mi">2</span><span class="o">.</span><span class="mi">0</span>
                                      <span class="ss">animations</span><span class="p">:</span> <span class="o">^</span><span class="p">{</span>
                                          <span class="n">typeof</span><span class="p">(</span><span class="nb">self</span><span class="p">)</span> <span class="n">strongSelf</span> <span class="o">=</span> <span class="n">weakSelf</span><span class="p">;</span>
                                          <span class="n">strongSelf</span><span class="o">.</span><span class="n">transform</span> <span class="o">=</span> <span class="no">CGAffineTransformMakeScale</span><span class="p">(</span><span class="mi">0</span><span class="o">.</span><span class="mi">8</span><span class="p">,</span> <span class="mi">0</span><span class="o">.</span><span class="mi">8</span><span class="p">);</span>
                                      <span class="p">}</span><span class="o">]</span><span class="p">;</span>
        <span class="o">[</span><span class="no">UIView</span> <span class="ss">addKeyframeWithRelativeStartTime</span><span class="p">:</span> <span class="mi">1</span> <span class="o">/</span> <span class="mi">2</span><span class="o">.</span><span class="mi">0</span>
                                <span class="ss">relativeDuration</span><span class="p">:</span> <span class="mi">1</span> <span class="o">/</span> <span class="mi">2</span><span class="o">.</span><span class="mi">0</span>
                                      <span class="ss">animations</span><span class="p">:</span> <span class="o">^</span><span class="p">{</span>
                                          <span class="n">typeof</span><span class="p">(</span><span class="nb">self</span><span class="p">)</span> <span class="n">strongSelf</span> <span class="o">=</span> <span class="n">weakSelf</span><span class="p">;</span>
                                          <span class="n">strongSelf</span><span class="o">.</span><span class="n">transform</span> <span class="o">=</span> <span class="no">CGAffineTransformMakeScale</span><span class="p">(</span><span class="mi">1</span><span class="o">.</span><span class="mi">0</span><span class="p">,</span> <span class="mi">1</span><span class="o">.</span><span class="mi">0</span><span class="p">);</span>
                                      <span class="p">}</span><span class="o">]</span><span class="p">;</span>
    <span class="p">}</span> <span class="ss">completion</span><span class="p">:</span> <span class="o">^</span><span class="p">(</span><span class="no">BOOL</span> <span class="n">finished</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">isSelected</span> <span class="o">=</span> <span class="no">NO</span><span class="p">;</span>
    <span class="p">}</span><span class="o">]</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
<h2 id="section-2">粒子爆炸动画</h2>
<p>这里的爆炸，我们不需要像之前的气泡爆炸一样，来切割View。想法是之前消息气泡的动画是为了让消息气泡有一种破裂的感觉，所以我们直接对视图进行粒子分割。而这里的粒子动画，就好像是拇指视图在经过按压之后，在墙面上敲击震动后扬起的灰尘，这些粒子不是属于原视图的。我们在多次观看最终结果图后，发现这是最合理的思路。</p>
<p>当我们确定思路后，我们会发现工作量减少了很多。因为我们使用<code>CALayer</code>的一个高性能原生粒子引擎来解决<code>CAEmitterLayer</code>。详细的相关属性和方法可以查看<a href="https://developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CAEmitterLayer_class/">CAEmitterLayer官方文档</a>。这里还是简单的介绍一下这个类，我们可以把<code>CAEmitterLayer</code>当做许多<code>CAEmitterCell</code>的容器，每一个cell也就是我们细化出的每一刻粒子。然而我们只需要定义一个<code>CAEmitterLayer</code>粒子效果来作为粒子样式模板即可，<code>CAEmitterLayer</code>负责基于模板实例化该样式的粒子流，使他们同时刻以动画形式表现。</p>
<p>以下是初始化<code>CAEmitterLayer</code>以及<code>CAEmitterCell</code>的代码：</p>
<div class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="c1">#pragma mark - Initial Function</span>
<span class="o">-</span> <span class="p">(</span><span class="n">void</span><span class="p">)</span> <span class="no">StartUp</span> <span class="p">{</span>
    <span class="nb">self</span><span class="o">.</span><span class="n">clipsToBounds</span> <span class="o">=</span> <span class="no">NO</span><span class="p">;</span>
    <span class="nb">self</span><span class="o">.</span><span class="n">userInteractionEnabled</span> <span class="o">=</span> <span class="no">NO</span><span class="p">;</span>
    <span class="no">CAEmitterCell</span> <span class="o">*</span><span class="n">emitter</span> <span class="o">=</span> <span class="o">[</span><span class="no">CAEmitterCell</span> <span class="n">emitterCell</span><span class="o">]</span><span class="p">;</span>
    <span class="n">emitter</span><span class="o">.</span><span class="n">contents</span>                <span class="o">=</span> <span class="p">(</span><span class="nb">id</span><span class="p">)</span><span class="o">[</span><span class="no">UIImage</span> <span class="ss">imageNamed</span><span class="p">:</span> <span class="err">@</span><span class="s2">&quot;Like-Sparkle&quot;</span><span class="o">].</span><span class="n">CGImage</span><span class="p">;</span>
    <span class="n">emitter</span><span class="o">.</span><span class="n">name</span>                    <span class="o">=</span> <span class="err">@</span><span class="s2">&quot;explosion&quot;</span><span class="p">;</span>
    <span class="n">emitter</span><span class="o">.</span><span class="n">alphaRange</span>              <span class="o">=</span> <span class="mi">0</span><span class="o">.</span><span class="mi">2</span><span class="n">f</span><span class="p">;</span>
    <span class="n">emitter</span><span class="o">.</span><span class="n">alphaSpeed</span>              <span class="o">=</span> <span class="o">-</span><span class="mi">1</span><span class="o">.</span><span class="n">f</span><span class="p">;</span>
    <span class="n">emitter</span><span class="o">.</span><span class="n">lifetime</span>                <span class="o">=</span> <span class="mi">0</span><span class="o">.</span><span class="mi">7</span><span class="n">f</span><span class="p">;</span>
    <span class="n">emitter</span><span class="o">.</span><span class="n">lifetimeRange</span>           <span class="o">=</span> <span class="mi">0</span><span class="o">.</span><span class="mi">3</span><span class="n">f</span><span class="p">;</span>
    <span class="n">emitter</span><span class="o">.</span><span class="n">birthRate</span>               <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
    <span class="n">emitter</span><span class="o">.</span><span class="n">velocity</span>                <span class="o">=</span> <span class="mi">40</span><span class="o">.</span><span class="mi">0</span><span class="n">f</span><span class="p">;</span>
    <span class="n">emitter</span><span class="o">.</span><span class="n">velocityRange</span>           <span class="o">=</span> <span class="mi">10</span><span class="o">.</span><span class="mi">0</span><span class="n">f</span><span class="p">;</span>
    <span class="n">emitter</span><span class="o">.</span><span class="n">emissionRange</span>           <span class="o">=</span> <span class="no">M_PI_4</span><span class="p">;</span>
    <span class="n">emitter</span><span class="o">.</span><span class="n">scale</span>                   <span class="o">=</span> <span class="mi">0</span><span class="o">.</span><span class="mo">05</span><span class="n">f</span><span class="p">;</span>
    <span class="n">emitter</span><span class="o">.</span><span class="n">scaleRange</span>              <span class="o">=</span> <span class="mi">0</span><span class="o">.</span><span class="mo">02</span><span class="p">;</span>
    <span class="n">_emitterLayer</span> <span class="o">=</span> <span class="o">[</span><span class="no">CAEmitterLayer</span> <span class="n">layer</span><span class="o">]</span><span class="p">;</span>
    <span class="n">_emitterLayer</span><span class="o">.</span><span class="n">name</span>              <span class="o">=</span> <span class="err">@</span><span class="s2">&quot;emitterLayer&quot;</span><span class="p">;</span>
    <span class="n">_emitterLayer</span><span class="o">.</span><span class="n">emitterShape</span>      <span class="o">=</span> <span class="n">kCAEmitterLayerCircle</span><span class="p">;</span>
    <span class="n">_emitterLayer</span><span class="o">.</span><span class="n">emitterMode</span>       <span class="o">=</span> <span class="n">kCAEmitterLayerOutline</span><span class="p">;</span>
    <span class="n">_emitterLayer</span><span class="o">.</span><span class="n">emitterPosition</span>   <span class="o">=</span> <span class="nb">self</span><span class="o">.</span><span class="n">center</span><span class="p">;</span>
    <span class="n">_emitterLayer</span><span class="o">.</span><span class="n">emitterSize</span>       <span class="o">=</span> <span class="no">CGSizeMake</span><span class="p">(</span><span class="mi">25</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
    <span class="n">_emitterLayer</span><span class="o">.</span><span class="n">renderMode</span>        <span class="o">=</span> <span class="n">kCAEmitterLayerOldestFirst</span><span class="p">;</span>
    <span class="n">_emitterLayer</span><span class="o">.</span><span class="n">masksToBounds</span>     <span class="o">=</span> <span class="no">NO</span><span class="p">;</span>
    <span class="n">_emitterLayer</span><span class="o">.</span><span class="n">emitterCells</span>      <span class="o">=</span> <span class="err">@</span><span class="o">[</span><span class="n">emitter</span><span class="o">]</span><span class="p">;</span>
    <span class="n">_emitterLayer</span><span class="o">.</span><span class="n">frame</span>             <span class="o">=</span> <span class="o">[</span><span class="no">UIScreen</span> <span class="n">mainScreen</span><span class="o">].</span><span class="n">bounds</span><span class="p">;</span>
    <span class="o">[</span><span class="nb">self</span><span class="o">.</span><span class="n">layer</span> <span class="ss">addSublayer</span><span class="p">:</span> <span class="n">_emitterLayer</span><span class="o">]</span><span class="p">;</span>
    <span class="n">_emitterLayer</span><span class="o">.</span><span class="n">emitterPosition</span>   <span class="o">=</span> <span class="nb">self</span><span class="o">.</span><span class="n">center</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
<p><code>CAMitterCell</code> 的属性基本上可以分为 3 种：</p>
<ul>
  <li>这种粒子的某一属性的初始值。比如，color属性指定了一个可以混合图片内容颜色的混合色。</li>
  <li>粒子某一属性的变化范围。比如 <code>emissionRange</code> 属性的值是2π，这意味着例子可以从360度任意位置反射出来。如果指定一个小一些的值，就可以创造出一个圆锥形。</li>
  <li>指定值在时间线上的变化。</li>
</ul>
<p>总结了以上一般性规律，我们对 <code>CAMitterCell</code> 的认识又进了一步。我想，你以及可以用他来制作火焰或者下雪的动效了。对吧~</p>
<h2 id="section-3">写在最后</h2>
<p>以上就是简单的点赞按钮动画效果。</p>
<p>在制作完这个样例 push 到 github 上之后，我还配置了 <code>CocoaPods</code> 安装方式（这也是我第一个支持 CocoaPods 的开源小库，走个国际范嘛~）。有机会的话，下次我们来分享如何装载 <code>.podspec</code> 文件，最近要开始突击期末考试了，暂停写代码，说不定下次再分享作品就是在上海了~</p>
<hr />
<p><a href="https://github.com/dgytdhy/DGThumbUpButton">DGThumbUpButton Github</a></p>
  <footer class="post-footer">
    <section class="author">
      <h4>Desgard_Duan</h4>
      <p>I write many code to write less code.💻</p>
    </section>
<aside class="share">
  <h4>Share this.</h4>
  <a href="http://twitter.com/share?text=《If you like me, Thumb Up!》 -- Guardia · 瓜地&amp;url=https://www.desgard.com/If-you-like-me-Thumb-Up/"
  onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
    <i class="fa fa-twitter-square"></i>
  </a>
  <a href="http://v.t.sina.com.cn/share/share.php?url=https://www.desgard.com/If-you-like-me-Thumb-Up/&amp;title=《If you like me, Thumb Up!》 —— Guardia · 瓜地" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
    <i class="fa fa-weibo"></i>
  </a>
</aside>
      <hr>
<aside id="comments" class="disqus">
  <div id="container"></div>
  <!-- <link rel="stylesheet" href="/assets/css/gitment.css">
  <script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
  <script>
  var gitment = new Gitment({
    id: "https://www.desgard.com/If-you-like-me-Thumb-Up/", 
    owner: 'Desgard',
    repo: 'desgard.github.com',
    oauth: {
      client_id: 'e2612df42f3f2a83e71c',
      client_secret: 'b53e85b314bb24a6d06773e48bbb62a4de3b8b3a',
    },
  })
  gitment.render('container')
  </script> -->
<link rel="stylesheet" href="/assets/css/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<div id='gitalk-container'></div>
<script>
    const gitalk = new Gitalk({
        id: "https://www.desgard.com/If-you-like-me-Thumb-Up/", 
        clientID: 'e2612df42f3f2a83e71c',
        clientSecret: 'b53e85b314bb24a6d06773e48bbb62a4de3b8b3a',
        repo: 'desgard.github.com',
        owner: 'Desgard',
        admin: ['Desgard'],
        // facebook-like distraction free mode
        distractionFreeMode: false
    })
    gitalk.render('gitalk-container')
</script>
</aside>
  </footer>
</article>
    </main>
<footer class="footer">
  <div class="container">
    <ul class="icons">
      <li>
        <a href="https://github.com/desgard" class="icon-github" target="_blank">
          <i class="fa fa-github"></i>
        </a>
      </li>
      <li>
        <a href="https://www.facebook.com/desgard.duan" class="icon-facebook" target="_blank">
          <i class="fa fa-facebook"></i>
        </a>
      </li>
      <li>
        <a href="https://twitter.com/Desgard_Duan" class="icon-twitter" target="_blank">
          <i class="fa fa-twitter"></i>
        </a>
      </li>
      <li>
        <a href="https://stackoverflow.com/users/6119149/desgard-duan" class="icon-github" target="_blank">
          <i class="fa fa-stack-overflow"></i>
        </a>
      </li>
      <li>
        <a href="https://weibo.com/desgard" class="icon-instagram" target="_blank">
          <i class="fa fa-weibo"></i>
        </a>
      </li>
    </ul>
    <p>
      <q>I write many code to write less code.💻</q>
      <small>– Gua</small>
    </p>
    <small class="clearfix">
      Powered by <a href="http://jekyllrb.com" target="_blank">Jekyll</a> • <a href="https://github.com/desgard" target="_blank">Open source <i class="fa fa-heart"></i></a>
    </small>
  </div>
</footer>
<a class="scroll-up fa fa-chevron-up bounce" href="#" data-position="0"></a>
<div id="modalSearch" class="modal">
  <div class="modal__overlay"></div>
  <div class="modal__content">
    <a href="#!" class="modal-close" data-modal-close>&times;</a>
    <div class="search-container">
      <input type="text" id="search-input" placeholder="Search articles">
      <ul id="results-container"></ul>
    </div>
  </div>
</div>
    <script src="/assets/main-52d417e8a6ff9f5b168386d37c96338a.js"></script>
  </body>
  <script>
    var link = "" ;
    var os = function() {  
      var ua = navigator.userAgent,  
      isWindowsPhone = /(?:Windows Phone)/.test(ua),  
      isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,   
      isAndroid = /(?:Android)/.test(ua),   
      isFireFox = /(?:Firefox)/.test(ua),   
      isChrome = /(?:Chrome|CriOS)/.test(ua),  
      isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),  
      isPhone = /(?:iPhone)/.test(ua) && !isTablet,  
      isPc = !isPhone && !isAndroid && !isSymbian;  
      return {  
        isTablet: isTablet,  
        isPhone: isPhone,  
        isAndroid : isAndroid,  
        isPc : isPc  
      };  
    }();  
    if (link.length > 0) {
      if (os.isAndroid || os.isPhone) {
        location.replace(link);
      }
    }
  </script>
</html>